<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template #label> 盘点单号 </template>
        {{ formData.billNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点主题 </template>
        {{ formData.billTitle }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点人 </template>
        {{ formData.inventoryBy }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点类型 </template>
        {{
          formData.labelType === 0 ? '档案盘点' : formData.labelType === 1 ? '盒盘点' : '混合盘点'
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点工具 </template>
        {{
          formData.inventoryTool === 0
            ? '人工'
            : formData.inventoryTool === 1
              ? '手持机'
              : formData.inventoryTool === 2
                ? '盘点车'
                : formData.inventoryTool === 3
                  ? '密集架'
                  : '未知工具'
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点日期 </template>
        {{ moment(formData.inventoryDate).format('YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点状态 </template>
        {{ formData.inventoryStatus === 0 ? '未盘点' : '盘点完成' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 盘点结果 </template>
        {{ formData.inventoryResult === 0 ? '正常' : '异常' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 备注 </template>
        {{ formData.note }}
      </el-descriptions-item>
    </el-descriptions>
    <el-form :inline="true" :model="queryParam" class="demo-form-inline formTop" size="medium">
      <el-form-item v-if="labelType !== 0" label="盒号/盒名">
        <el-input v-model="queryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
      </el-form-item>
      <el-form-item v-if="labelType !== 1" label="档号/题名">
        <el-input v-model="queryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
      </el-form-item>
      <el-form-item label="位置">
        <el-input v-model="queryParam.positionName" placeholder="请输入位置" clearable></el-input>
      </el-form-item>
      <el-form-item label="盘点结果">
        <el-select v-model="queryParam.detailsResult" placeholder="请选择盘点结果" clearable>
          <el-option v-for="item in [
            { value: 0, label: '盘到' },
            { value: 1, label: '未盘到' },
            { value: 2, label: '离库' },
          ]" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="rest">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%" max-height="20vh">
      <el-table-column v-if="labelType === 0" prop="archiveNo" label="档号" width=""></el-table-column>
      <el-table-column v-if="labelType === 0" prop="archiveName" label="题名" width=""></el-table-column>
      <el-table-column v-if="labelType === 1" prop="boxNo" label="盒号" width=""></el-table-column>
      <el-table-column v-if="labelType === 1" prop="boxName" label="盒名" width=""></el-table-column>
      <el-table-column v-if="labelType === 2" prop="archiveNoOrBoxNo" label="档号/盒号" width="">
        <template #default="scope">
          <span v-if="scope.row.labelType === 0">{{ scope.row.archiveNo }}</span>
          <span v-if="scope.row.labelType === 1">{{ scope.row.boxNo }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="labelType === 2" prop="archiveNameOrBoxName" label="题名/盒名" width="">
        <template #default="scope">
          <span v-if="scope.row.labelType === 0">{{ scope.row.archiveName }}</span>
          <span v-if="scope.row.labelType === 1">{{ scope.row.boxName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="positionName" label="位置" width=""></el-table-column>
      <el-table-column prop="rfid" label="rfid" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column v-if="labelType === 2" prop="labelType" label="类型" width="">
        <template #default="scope">
          <el-tag v-if="scope.row.labelType === 0">档案</el-tag>
          <el-tag v-if="scope.row.labelType === 1">档案盒</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="storeStatus" label="在库状态" width="">
        <template #default="scope">
          <el-tag v-if="scope.row.storeStatus === 0" type="danger">未入库</el-tag>
          <el-tag v-if="scope.row.storeStatus === 1" type="success">在库</el-tag>
          <el-tag v-if="scope.row.storeStatus === 2" type="warning">离库</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="detailsResult" label="盘点结果" width="">
        <template #default="scope">
          <el-tag v-if="scope.row.detailsResult === 0" type="success">盘到</el-tag>
          <el-tag v-if="scope.row.detailsResult === 1" type="danger">未盘到</el-tag>
          <el-tag v-if="scope.row.detailsResult === 2" type="warning">离库</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getInfo, detailsList } from '@/api/rfid/inventoryBill'
import moment from 'moment/moment'

export default {
  name: 'inventoryBillDialog',
  data() {
    return {
      moment,
      labelType: '',
      dialogTitle: '盘点详情',
      dialogVisible: false,
      formData: {},
      queryParam: {},
      tableData: [],
    }
  },
  methods: {
    onSubmit() {
      detailsList(this.queryParam)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    rest() {
      this.queryParam = {
        billNumber: this.formData.billNumber,
      }
      this.onSubmit()
    },
    show(row) {
      this.queryParam.billNumber = row.billNumber
      getInfo(row.billNumber)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data
            this.tableData = res.data.data.detailsList
            this.labelType = this.formData.labelType
            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    closeDialog() {
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.formTop {
  margin-top: 20px;
}

.el-table {
  display: flex;
  flex-direction: column;
}

.el-table__header-wrapper {
  overflow: unset;
}
</style>
